<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端监控SDK</title>
  <!--<%= htmlWebpackPlugin.files.js %>-->
  <script src="monitor.js"></script>

  <!-- case2: 资源加载报错 -->
  <link rel="stylesheet" href="./somelink.css">
</head>

<body>
  <div id="container">
    <div class="content main" style="word-wrap: break-word">
      xxx
    </div>

    <div class="content">
      <input type="button" value="点击抛出错误" onclick="errorClick()"/>
      <input type="button" value="点击抛出Promise错误" onclick="promiseErrorClick()"/>
    </div>

    <!-- case4: 白屏 -->
    <script>
      const content = document.getElementsByClassName('main')[0];
      content.innerHTML = content.innerHTML+ '@'.repeat(1000)
    </script>

    <div class="content-2">
      <input id="successBtn" type="button" value="ajax成功请求" onclick="sendSuccess()">
      <input id="errorBtn" type="button" value="ajax失败请求" onclick="sendError()">
    </div>

    <!-- case: FID First Input Delay(首次输入延迟)-->
    <div>
      <button id="clickBtn" onclick="testFID()">测试FID</button>
    </div>
    <script>
      function testFID(){
        const start = Date.now();
        while ((Date.now() - start)<1000){}
        //业务执行时间 和 FID 没有关系
      }
    </script>

    <div>
      <button id="longTaskBtn">执行longTask</button>
    </div>
    <script>
      const longTaskBtn = document.getElementById('longTaskBtn');
      longTaskBtn.addEventListener('click', longTask);
      function longTask() {
        let start = Date.now();
        console.log('longTask开始 start', start);
        while (Date.now() < (200 + start)) { }
        console.log('longTask结束 end', (Date.now() - start));
      }
    </script>
  </div>

  <!-- case1: JS执行错误或者promise异常 -->
  <script>
    /** case1: JS执行错误或者promise异常*/
    // 可以被 window.addEventListener('error' 捕获
    function errorClick(){
      window.someVar.error = 'error'; // → 这里window.someVar显然没有定义 window.someVar.error 会抛： (index):18 Uncaught TypeError: Cannot set property 'error' of undefined // 可以被 window.addEventListener('error' 捕获
    }

    // 可以被 window.addEventListener('unhandledrejection' 捕获
    function promiseErrorClick(){
      new Promise(function (resolve, reject) {
        // window.someVar.error = 'error'; // Uncaught (in promise) TypeError: Cannot set property 'error' of undefined; // 无法被 window.addEventListener('error' 捕获
        // ↑ 被 unhandledrejection 捕获后, event.reason 是这里 抛出的 TypeError, 包括message和stack两个属性

        reject('promiseErrorClick error'); //Uncaught (in promise) promiseErrorClick error // 无法被 window.addEventListener('error' 捕获
        //↑ 被 unhandledrejection 捕获后, event.reason 就是这里 reject的  'promiseErrorClick error'
      }).then(res => {
        console.log(res);
      });
    }
  </script>

  <!-- case2: 接口异常监控 -->
  <script>
    function sendSuccess(){
      const xhr = new XMLHttpRequest();
      xhr.open('GET', '/success', true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        console.log('xhr.response:',xhr.response);
      };
      xhr.send();
    }

    function sendError(){
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/error', true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        console.log('xhr.onload xhr.response:',xhr.response);
      };
      xhr.onerror = function(error){
        console.log('xhr.onerror error:',error);
      }
      xhr.send('name=ahhh');
    }
  </script>

  <!-- case3: 资源加载报错 -->
  <script defer src="/loadSourceError.js"></script>

  <!-- case4:  -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      let start = Date.now();
      while ((Date.now() - start) < 1000) {}
    });
  </script>


  <!-- case: FMP First Meaningful Paint(首次有意义绘制) -->
  <script>
    setTimeout(() => {
      const content = document.getElementsByClassName('content')[0]
      const h1 = document.createElement('h1');
      h1.innerHTML = '我是这个页面中最有意义的内容';
      h1.setAttribute('elementtiming', 'meaningful'); //← 必须设置这个属性 浏览器才知道你指定了这个元素为mp, 才能拿到FMP

      content.appendChild(h1);
    }, 2000);
  </script>
</body>
</html>
